<template>
    <div class="line-bar-component">
        <filter-params @paramsChange="paramsChange" :config="config" :filterParams="config.filterParams" ></filter-params>
        <div class="line-bar-content" :ref="config.alias"></div>
    </div>
</template>

<script>
import ChartPublic from '../ChartPublic.js'
export default {
    /**
     * 线柱混搭
     */
    name: "lineBarComponent",
    mixins: [ChartPublic],
    data() {
        return {
        }
    },
    methods: {
        setOption(){
            //图例组件
            let legend = [];
            //直角坐标系 grid 中的 x 轴
            let xAxis = {};
            //yAxis直角坐标系 grid 中的 y 轴
            let yAxis = [];
            /**
             *系列列表
             [{name: 名称,
             type: 类型,
             data: 数据 []
             }]
             */
            let series = [];
            //获取维度
            xAxis=this.getDimensions();
            //获取度量
            for (let i = 0; i < this.config.measureList.length; i++) {
                let measures=this.config.measureList[i];
                for (let j = 0; j < measures.length; j++) {
                    let array=[];
                    let measure = measures[j];
                    //默认折线
                    let chartType="line";
                    if(measure.chartType){
                        chartType=measure.chartType
                    }
                    //默认左边
                    let position="left";
                    if(measure.position){
                        position=measure.position
                    }
                    //格式
                    let formatter="{value}";
                    if(measure.formatter){
                        formatter+=measure.formatter;
                    }
                    legend.push(measure.fieldLabel);
                    let color="";
                    if(this.config.colour.content.length>0){
                        color=this.config.colour.content[(i%this.config.colour.content.length)];
                    }
                    yAxis.push({
                        type: 'value',
                        name: measure.fieldLabel,
                        min: measure.min?measure.min:0,
                        max: measure.max?measure.max:100,
                        position: position,
                        offset: measure.offset?measure.offset:0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color:color
                            }
                        },
                        axisLabel: {
                            formatter: formatter
                        }
                    })
                    for (let k = 0; k < this.data.length; k++) {
                        let value= this.data[k][measure.tableName+'_'+measure.fieldName];
                        if(value){
                            array.push(value);
                        }else {
                            array.push(0);
                        }
                    }
                    let obj={
                        name: measure.fieldLabel,
                        type:chartType,
                        data:array
                    }
                    //柱形宽度
                    if(this.config.advConfig && this.config.advConfig.barWidth ){
                        obj.barWidth=this.config.advConfig.barWidth;
                    }
                    series.push(obj);
                }
            }
            let dataZoom = [];
            if(this.config.advConfig.dataZoom && xAxis.data.length>this.config.advConfig.dataZoomNumeral){
                if(this.config.advConfig.Xaxis){
                    //X轴是否滚动
                    dataZoom.push({
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: this.config.advConfig.Xstart, // 初始范围的起始百分比
                        end: this.config.advConfig.Xend // 初始范围的结束百分比
                    });
                    if(this.config.advConfig.inside){
                        dataZoom.push({
                            type: 'inside',
                            start:this.config.advConfig.insideStart,
                            end: this.config.advConfig.insideEnd
                        })
                    }
                }
                if(this.config.advConfig.Yaxis){
                    dataZoom.push({
                        show: true,
                        yAxisIndex: [0],
                        width: 30,
                        height: '80%',
                        left: '93%',
                        start: this.config.advConfig.Ystart, // 初始范围的起始百分比
                        end: this.config.advConfig.Yend // 初始范围的结束百分比
                    });
                }
            };
            this.option={
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {show:this.config.advConfig.saveAsImage},
                        magicType:this.config.advConfig.magicType? {type: ['line', 'bar']}:{} ,
                        restore: {show: this.config.advConfig.restore}
                    }
                },
                color:this.getColors(),
                legend: {
                    data: legend,
                    show:this.config.advConfig.legendShow,
                    left:this.config.advConfig.legendLeft,
                    top:this.config.advConfig.legendTop
                },
                xAxis: xAxis,
                yAxis: yAxis,
                series: series,
                dataZoom:dataZoom
            };
        }
    }
}
</script>
<style scoped>
.line-bar-component{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.line-bar-content{
    flex: 1;
}
</style>
